import React from 'react';
import {connect} from 'dva';
import PropTypes from 'prop-types';
import {Link} from 'dva/router';
import {Row,Col,Form, Icon, Input, Button, Checkbox,Card,Layout,message} from 'antd';
import {numvail,selectvail} from '../../utils/Validator.js'
import style from '../../styles/login.less';
import reqwest from 'reqwest';
const FormItem = Form.Item;
const {  Footer } = Layout;
let _u = navigator.userAgent;
let isAndroid = _u.indexOf('Android') > -1 || _u.indexOf('Adr') > -1; //android终端
let isiOS = !!_u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
class ResetPassWord extends React.Component {
  constructor(props){
    super(props);
    this.state={
      username:'',
      password:'',
      loading:false
    }
  }
  handleSubmit(e){
    let _this = this;
    e.preventDefault();
    // console.log(window.host+'/api/sessions')
    this.props.form.validateFields((err, values) => {
      if (!err) {
        _this.setState({loading:true});
        reqwest({
          url: window.host+'/api/users/update_password',
          method: 'post',
          crossOrigin: true,
          type: 'json',
          data:{access_token:window.localStorage['token'],old_password:values.oldpass,new_password:values.firstpass},
        }).then((data) => {
            if(data.status=='success'){
              _this.setState({loading:false});
              // let set ={"mobile":data.current_user.mobile,"avatar":data.current_user.avatar,"avatar_url":data.current_user.avatar_url,"name":data.current_user.name,"role":data.current_user.role,"accout_name":data.current_user.account.name,"invit_url":data.current_user.account.invit_url}
                message.success('密码重置成功,请重新登录',1,()=>{

                  // window.location.hash=window.location.hash
                  window.localStorage.clear()
                  window.location.hash='/';
                }
              )
              
            }else{
              _this.setState({loading:false});
              message.error(data.msg)
            }
            
            
        }).fail( (err, msg) =>{
          _this.setState({loading:false});
          message.error('当前没有网络连接 或者 服务君挂了哦')
        });
      }
    });
  }
  componentWillMount(){

  }
  render() {
    const { getFieldDecorator,getFieldValue,setFields } = this.props.form;
    const {username,password} = this.state;
    // <a className="login-form-forgot" href="">忘记密码? </a>
    console.log(getFieldValue('firstpass'))
    return (
        <Layout className={`${style.login_form}`}>
          <Col className={`${style.login_form_dec}`}>
            <h1>重置密码</h1>
            <Form className={`${style.login_center}`} onSubmit={this.handleSubmit.bind(this)}  >
              <FormItem >
                {getFieldDecorator('oldpass', {
                  rules: [{ required: true, message: '请输入正确的手机号'}],
                })(
                  <Input type="password"  prefix={<Icon type="user" style={{ fontSize: 14 }} />} placeholder="旧密码" />
                )}
              </FormItem>
              <FormItem>
                {getFieldDecorator('firstpass', {
                  rules: [{ required: true, message: '请输入密码',validator:(rule,value,callback)=>{
                    if(!!value){
                      if(getFieldValue('secondpass')!==value&&!!getFieldValue('secondpass')){
                        setFields({
                          'secondpass':{
                            value:getFieldValue('secondpass'),
                            errors:[new Error('两次密码输入不一致')]
                          }
                        })
                        callback()
                      }else if(getFieldValue('secondpass')==value){
                        setFields({
                          'secondpass':{
                            value:getFieldValue('secondpass'),
                          }
                        })
                        callback()
                      }
                    }else{
                      callback('请输入密码')
                    }

                  } }],
                })(
                  <Input  prefix={<Icon type="lock" style={{ fontSize: 14 }} />} type="password" placeholder="新密码" />
                )}
              </FormItem>
              <FormItem>
                {getFieldDecorator('secondpass', {
                  rules: [{ required: true,validator:(rule,value,callback)=>{
                    // console.log(value)
                    if(!!value){
                      if(getFieldValue('firstpass')==value){
                        callback()
                      }else{
                        callback('两次输入密码需要一致')
                      }
                    }else{
                      callback('请再次输入新密码')
                    }
                  } }],
                })(
                  <Input onChange={()=>{console.log(getFieldValue('firstpass'))}} prefix={<Icon type="lock" style={{ fontSize: 14 }} />} type="password" placeholder="再次输入新密码" />
                )}
              </FormItem>
              <FormItem className={`${style.login_form_right}`}>
                <Button loading={this.state.loading} style={{width:'100%'}} type="primary" htmlType="submit" className="login-form-button">
                  保存
                </Button>
              </FormItem>
            </Form>
          </Col>
        </Layout>
    );
  }
}

const ResetPassWordForm = Form.create()(ResetPassWord);

export default connect()(ResetPassWordForm);